<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML表格与表单标签示例</title>
  <style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }
    .section {
        flex: 1;
        min-width: 300px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    form {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 5px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input, select, textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: #45a049;
    }
    caption {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 1.2em;
    }
  </style>
</head>
<body>
<h1>HTML表格与表单标签示例</h1>

<div class="container">
  <div class="section">
    <h2>1. 表格标签示例</h2>

    <!-- 基本表格 -->
    <h3>基本表格</h3>
    <table>
      <caption>学生信息表</caption>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
      </tr>
      <tr>
        <td>2023001</td>
        <td>张三</td>
        <td>20</td>
        <td>计算机科学</td>
      </tr>
      <tr>
        <td>2023002</td>
        <td>李四</td>
        <td>21</td>
        <td>电子工程</td>
      </tr>
      <tr>
        <td>2023003</td>
        <td>王五</td>
        <td>19</td>
        <td>软件工程</td>
      </tr>
    </table>

    <!-- 带表头分组的表格 -->
    <h3>带表头分组的表格</h3>
    <table>
      <caption>产品销售数据</caption>
      <thead>
      <tr>
        <th colspan="4">2023年季度销售统计</th>
      </tr>
      <tr>
        <th>产品</th>
        <th>Q1</th>
        <th>Q2</th>
        <th>总计</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>产品A</td>
        <td>1200</td>
        <td>1500</td>
        <td>2700</td>
      </tr>
      <tr>
        <td>产品B</td>
        <td>800</td>
        <td>950</td>
        <td>1750</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <th>合计</th>
        <th>2000</th>
        <th>2450</th>
        <th>4450</th>
      </tr>
      </tfoot>
    </table>

    <!-- 单元格合并示例 -->
    <h3>单元格合并示例</h3>
    <table>
      <caption>课程表</caption>
      <tr>
        <th>时间</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
      </tr>
      <tr>
        <td>上午</td>
        <td>数学</td>
        <td rowspan="2">英语</td>
        <td>物理</td>
      </tr>
      <tr>
        <td>下午</td>
        <td>化学</td>
        <td>生物</td>
      </tr>
      <tr>
        <td>晚上</td>
        <td colspan="3">自习</td>
      </tr>
    </table>
  </div>

  <div class="section">
    <h2>2. 表单标签示例</h2>

    <form action="#" method="post">
      <h3>用户注册表单</h3>

      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required placeholder="请输入用户名">
      </div>

      <div class="form-group">
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="请输入邮箱地址">
      </div>

      <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required placeholder="请输入密码">
      </div>

      <div class="form-group">
        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
      </div>

      <div class="form-group">
        <label>兴趣爱好:</label>
        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">运动</label>
        <input type="checkbox" id="music" name="hobby" value="music">
        <label for="music">音乐</label>
      </div>

      <div class="form-group">
        <label for="education">最高学历:</label>
        <select id="education" name="education">
          <option value="highschool">高中</option>
          <option value="college">专科</option>
          <option value="bachelor" selected>本科</option>
          <option value="master">硕士</option>
          <option value="phd">博士</option>
        </select>
      </div>

      <div class="form-group">
        <label for="message">个人简介:</label>
        <textarea id="message" name="message" rows="4" placeholder="请输入个人简介"></textarea>
      </div>

      <div class="form-group">
        <label for="birthdate">出生日期:</label>
        <input type="date" id="birthdate" name="birthdate">
      </div>

      <div class="form-group">
        <label for="avatar">上传头像:</label>
        <input type="file" id="avatar" name="avatar" accept="image/*">
      </div>

      <div class="form-group">
        <input type="checkbox" id="agreement" name="agreement" required>
        <label for="agreement">我已阅读并同意<a href="#">用户协议</a></label>
      </div>

      <button type="submit">提交</button>
      <button type="reset" style="background-color: #f44336; margin-left: 10px;">重置</button>
    </form>
  </div>
</div>
</body>
</html>
